<template>
	<view class="travel-details flex--col">
		<TravelMain :travel="travel"></TravelMain>
		<image aria-label="火柴人在沙滩上晒太阳的插画" src="@/static/chux/fill_blank.png" class="travel-picture" mode="aspectFit"></image>
		<view class="travel-details-info">
			<view class="travel-details-info-item" v-show="detailIndex === 0" v-if="travel !== null">
				<TravelInfo :travel="travel"></TravelInfo>
			</view>
			<view class="travel-details-info-item" v-show="detailIndex === 1" v-if="travel !== null">
				<PersonalCard :userId="travel.userId"></PersonalCard>
			</view>
			<view class="travel-details-info-item" v-show="detailIndex === 2" v-if="travel !== null">
				<RouteMap :routeId="travel.routeId"></RouteMap>
			</view>
			
			
		</view>
		<view class="travel-details-categories text--secondary-dark--heavy flex--row">
			<view class="travel-details-category flex--row" role="button" :class="{'active':detailIndex === 0}" @click="detailIndex = 0">
				<text>出行</text>
				<image aria-label="查看出行信息"  src="@/static/chux/route.svg" class="icon"></image>
			</view>
			<view class="travel-details-category flex--row" :class="{'active':detailIndex === 1}" @click="detailIndex = 1">
				<text>志愿者</text>
				<image aria-label="查看志愿者信息" src="@/static/chux/head.svg" class="icon"></image>
			</view>
			<view class="travel-details-category flex--row" :class="{'active':detailIndex === 2}" @click="detailIndex = 2">
				<text>路线</text>
				<image aria-label="查看路线信息" src="@/static/chux/map.svg" class="icon"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import TravelMain from "./components/TravelMain.vue"
	import TravelInfo from "./components/TravelInfo.vue"
	import RouteMap from "./components/RouteMap.vue"
	import PersonalCard from "@/pages/chux/components/PersonalCard.vue"
	export default {
		components:{
			TravelMain,
			TravelInfo,
			PersonalCard,
			RouteMap
		},
		data() {
			return {
				detailIndex:0,
				travel:null,
			}
		},
		methods: {
			
		},
		onLoad(travel){
			this.travel = travel	
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		width:100%;
		padding:24px 0px;
	}
	
	
	.text--secondary-dark--heavy{
		font-size: 20px;
		color:#333;
		font-weight: 600;
		letter-spacing: 0.6px;
	}
	
	.travel-details{
		width:600rpx;
		
		margin: auto;
		align-items: center;
		
		.travel-picture{
			width:60%;
			height: 20vh;
		}
		
		.travel-details-illustration{
			width:100%;
		}
		
		.travel-details-info{
			height:720rpx;
			width:100%;
			margin-bottom: 24px;
			
			&-item{
				height:100%;
			}
			
		}
		.travel-details-categories{
			width: 100%;
			justify-content: space-between;
			
		}
		
		.travel-details-category{
			padding:4px 8px;
			align-items: flex-end;
			gap:4px;
			@include border-four-roundings;
			
			&.active{
				border:1px solid transparent;
				border-radius: 10px;
				background-color: rgba($main-color,0.3);
			}
		}
	}

</style>
